<template>
  <div id="">
    <headerbox :headerTitle="'地图'" :hasBack="true"></headerbox>
    <ul class="formList">
      <li>
        <span style="text-align:center; border-right:1px solid #f0f0f0;" @click="searhcMap">
          <img src="@/assets/serach_icon.png" alt="" width="20">
        </span>
        <input type="text" name="" v-model="searchValue" placeholder="请输入搜索关键词" @keyup.enter="searchIpt">
      </li>
    </ul>
    <div class="allmap" ref="allmap">
      <!-- 地图显示区域 -->
    </div>
    <div class="mapResult" ref="result">

    </div>
  </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex';

export default {
  name: "",
  data: () => ({
    searchValue:'',
    centerPoi:[],
  }),
  computed:{
    ...mapState({
      mapValue:state=>state.mapStore.mapVal,
    })
  },
  methods: {
    ...mapMutations([
      'setMapStore',
    ]),
    map(){
      let self = this;
      let map =new BMap.Map(self.$refs.allmap); // 创建Map实例
      map.centerAndZoom(new BMap.Point(118.60036234,24.90165238), 12);// 初始化地图,设置中心点坐标和地图级别
      map.addControl(new BMap.MapTypeControl({//添加地图类型控件
        mapTypes:[
          BMAP_NORMAL_MAP,
          BMAP_HYBRID_MAP
        ]}));
      map.setCurrentCity("泉州");// 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      // 获取浏览器所在的定位
      var geolocation = new BMap.Geolocation();
    	geolocation.getCurrentPosition(function(r){
    		if(this.getStatus() == BMAP_STATUS_SUCCESS){
    			var mk = new BMap.Marker(r.point);
    			map.addOverlay(mk);
    			map.panTo(r.point);
          console.log(r.point.lng+','+r.point.lat);
          self.centerPoi = [r.point.lng,r.point.lat];
    			// alert('您的位置：'+r.point.lng+','+r.point.lat);
    		}
    		else {
    			alert('failed'+this.getStatus());
    		}
    	})
    	//关于状态码
    	//BMAP_STATUS_SUCCESS	检索成功。对应数值“0”。
    	//BMAP_STATUS_CITY_LIST	城市列表。对应数值“1”。
    	//BMAP_STATUS_UNKNOWN_LOCATION	位置结果未知。对应数值“2”。
    	//BMAP_STATUS_UNKNOWN_ROUTE	导航结果未知。对应数值“3”。
    	//BMAP_STATUS_INVALID_KEY	非法密钥。对应数值“4”。
    	//BMAP_STATUS_INVALID_REQUEST	非法请求。对应数值“5”。
    	//BMAP_STATUS_PERMISSION_DENIED	没有权限。对应数值“6”。(自 1.1 新增)
    	//BMAP_STATUS_SERVICE_UNAVAILABLE	服务不可用。对应数值“7”。(自 1.1 新增)
    	//BMAP_STATUS_TIMEOUT	超时。对应数值“8”。(自 1.1 新增)

      self.mapClickEvent(map);
    },
    searhcMap() {
      let self = this;
      let map = new BMap.Map(self.$refs.allmap);
      map.centerAndZoom(new BMap.Point(118.60036234,24.90165238), 12);// 初始化地图,设置中心点坐标和地图级别
    	// let local = new BMap.LocalSearch(map, {
    	// 	renderOptions:{map: map}
    	// });

      var local = new BMap.LocalSearch(map, {renderOptions:{map: map, panel: self.$refs.result}});
    	local.search(self.searchValue);
      self.mapClickEvent(map);
    },
    searchIpt(event) {
      if(event.keyCode===13) {
        this.searhcMap();
        // this.setMapStore(this.searchValue);
      }
    },
    mapClickEvent(map) {    //点击地图获取
      let self = this;
      var geoc = new BMap.Geocoder();
      map.addEventListener("click",function(e){
        var pt = e.point;
        geoc.getLocation(pt, function(rs){
            //addressComponents对象可以获取到详细的地址信息
            // console.log(rs);
            self.setMapStore(rs);
            // self.$store.commit('mapStore/setMapStore');
            // self.$store.commit('setMapStore', rs);
            self.$router.go(-1);
        });
      });
    }
  },
  mounted() {
    //do something after mounting vue instance
    this.map();
  }
}
</script>
<style lang="scss" scoped>
#app{
  margin-bottom: 0;
}
.allmap{
  width: 100%;
  height: 46vh;
}
.mapResult{
  height: 40vh;
  overflow-y: scroll;
}
</style>
